/** @format */

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const autoprefixer = require('autoprefixer');
const config = require('./config');

const { MATCH_NODE_MODULES, APP_ENV } = config;
const isDev = APP_ENV === 'dev';

const tsxRegex = /\.(ts|js)x?$/;
const cssRegex = /\.css$/;
const stylRegex = /\.styl$/;
const lessRegex = /\.less$/;
const sassRegex = /\.(scss|sass)$/;
const imgRegex = /\.(png|jp(e)?g|gif|svg|webp)(\?v=\d+\.\d+\.\d+)?$/;
const fontRegex = /.(woff2?|eot|ttf|otf)$/;
const mediaRegex = /.(mp4|webm|ogg|mp3|wav|flac|aac)$/;

const tsxLoaderRule = [
  {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      cacheCompression: false,
    },
  },
];

const styleLoaderRule = [
  isDev
    ? 'style-loader'
    : {
      loader: MiniCssExtractPlugin.loader,
      options: {
        esModule: true,
        // modules: {
        //   namedExport: true
        // },
        publicPath: '../',
      },
		  },
  'css-loader',
  {
    loader: 'postcss-loader',
    options: {
      postcssOptions: {
        // config: './postcss.config.js',
        plugins: [
          'postcss-preset-env',
          autoprefixer({
            overrideBrowserslist: [
              'defaults',
              'not ie < 11',
              '> 1%',
              'last 5 versions',
              'not ie <= 10',
              '> 0.15% in CN',
              'ios 7',
            ],
            // browsers : ['last 10 versions']//必须设置支持的浏览器才会自动添加添加浏览器兼容
          }),
        ],
      },
      sourceMap: isDev,
    },
  },
];
module.exports = [
  {
    test: tsxRegex,
    exclude: MATCH_NODE_MODULES,
    use: tsxLoaderRule,
  },
  {
    test: cssRegex,
    exclude: MATCH_NODE_MODULES,
    use: styleLoaderRule,
  },
  {
    test: sassRegex,
    exclude: MATCH_NODE_MODULES,
    use: [...styleLoaderRule, 'sass-loader'],
  },
  {
    test: stylRegex,
    exclude: MATCH_NODE_MODULES,
    use: [...styleLoaderRule, 'stylus-loader'],
  },
  {
    test: lessRegex,
    exclude: MATCH_NODE_MODULES,
    use: [
      ...styleLoaderRule,
      {
        loader: 'less-loader',
        options: {
          lessOptions: {
            importLoaders: 2,
            // 可以加入modules: true，这样就不需要在less文件名加module了
            modules: true,
            // 如果要在less中写类型js的语法，需要加这一个配置
            javascriptEnabled: true,
          },
        },
      },
    ],
  },
  {
    test: imgRegex,
    type: 'asset',
    parser: {
      dataUrlCondition: {
        maxSize: 8 * 1024,
      },
    },
    generator: {
      filename: 'images/[hash][ext][query]', // 文件输出目录和命名
    },
  },
  {
    test: fontRegex,
    type: 'asset',
    parser: {
      dataUrlCondition: {
        maxSize: 10 * 1024, // 小于10kb转base64
      },
    },
    generator: {
      filename: 'font/[name].[hash:8][ext]',
    },
  },
  {
    test: mediaRegex,
    type: 'asset', // type选择asset
    parser: {
      dataUrlCondition: {
        maxSize: 10 * 1024, // 小于10kb转base64
      },
    },
    generator: {
      filename: 'media/[hash][ext][query]', // 文件输出目录和命名
    },
  },
  {
    // 匹配json文件
    test: /\.json$/,
    type: 'asset/resource', // 将json文件视为文件类型
    generator: {
      // 这里专门针对json文件的处理
      filename: 'json/[name].[hash][ext][query]',
    },
  },
  {
    test: /\.(md)$/,
    type: 'asset/resource',
  },
];
